<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体与嵌入</title>
    <style>
        body {
            display: flex;
        }

        .box {
            flex: 1;
        }

        img {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <!-- 加载图片 -->
    <div class="box">
        <h1>这是第一个可爱的小女孩</h1>
        <img src="./static/img/1.jpg">
    </div>
    <!-- 图片未正常加载 提示 -->
    <div class="box">
        <h1>这是第二个可爱的小女孩</h1>
        <img alt="诶呀裂开了！" src="./static/img/x.jpg">11
    </div>
    <!-- 添加宽高 为图片预留空间 -->
    <div class="box">
        <h1>这是第二个可爱的小女孩</h1>
        <!-- title: 设置鼠标悬停 -->
        <img width="100" height="100" src="./static/img/x.jpg" title="网络可能不好拉">11
    </div>


</body>

</html>